<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-30 08:25:44
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 09:50:35
 * @Description: file content
 * @FilePath: \blog-cms\src\views\tool\website\index.vue
-->
<template>
  <div class="page">
    <search-form :formItems="newSearchConfig" @search="fetchData"></search-form>
    <el-card class="table-card">
      <!-- 工具栏 -->
      <div class="action-box">
        <add-button @click="openDialog()">添加网站</add-button>
      </div>
      <!-- 表格 -->
      <pro-table
        :columns="columns"
        :pagination="pagination"
        @pagination-change="handlePaginationChange"
        :data="dataList"
      >
        <template #action="{ row }">
          <edit-button size="small" @click="handleEdit(row)">编辑</edit-button>
          <del-button size="small" @click="handleDelete(row.id)">删除</del-button>
        </template>
      </pro-table>
      <!-- 对话框 -->
      <base-dialog
        v-model="dialogVisible"
        @ok="handleSubmit"
        :title="dialogTitle"
        @cancel="closeDialog"
      >
        <dynamic-form
          ref="formRef"
          :form-config="newFormConfig"
          v-model="formData"
          @submit-success="handleSubmitBefore"
        ></dynamic-form>
      </base-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { columns, formConfig, searchConfig } from './config'
  import { deleteLink, fetchLinkList, saveLink } from '@/services/apis/tools/website'
  import { useWebsiteStore } from '@/stores/websiteStore'
  import { storeToRefs } from 'pinia'
  import { useTableData, useFormDialog, useDeleteConfirm, useOptions } from '@/hooks'

  const websiteStore = useWebsiteStore()
  const { categoryList } = storeToRefs(websiteStore)
  const { generateOptions } = useOptions('category_id')
  const newFormConfig = computed(() => generateOptions(formConfig, categoryList.value))
  const newSearchConfig = computed(() => generateOptions(searchConfig, categoryList.value))
  // 表格数据hooks
  const { dataList, fetchData, handlePaginationChange, pagination } = useTableData(fetchLinkList)
  const {
    dialogVisible,
    dialogTitle,
    formData,
    openDialog,
    closeDialog,
    formRef,
    handleSubmit,
    handleSubmitSuccess
  } = useFormDialog(saveLink, fetchData)
  // 删除确认
  const { handleDelete } = useDeleteConfirm(deleteLink, fetchData)
  const handleSubmitBefore = (data: any) => {
    const formData = new FormData()
    for (const key in data) {
      if (key === 'icon_url') {
        formData.append(key, data.icon_url[0].raw || data.icon_url[0].url)
      } else {
        formData.append(key, data[key])
      }
    }
    // saveLink(formData)
    handleSubmitSuccess(formData)
  }
  // 初始化加载数据
  onMounted(() => {
    if (categoryList.value.length === 0) {
      websiteStore.fetchCategories()
    }
    fetchData()
  })
  const handleEdit = (row: any) => {
    // 获取图标  也可以集成到hooks中 多传一个参数 后期再考虑做不做成通用
    openDialog({ ...row, icon_url: [{ url: row.icon_url }] }, '编辑网站')
  }
</script>

<style lang="scss" scoped></style>
